<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Test Types</title>

	<link rel="stylesheet" type="text/css"	href="../src/widgets.css"/>
	<script type="text/javascript" src="../src/core.js"></script>
	<script type="text/javascript" src="../src/element.js"></script>
	<script type="text/javascript" src="../src/types.js"></script>

	<script>

		var number_slot;
		var number_select;
		var number_checkbox;
		var number_text;
		var number = new minjs.Number(123456789.123456789);
		
		var date_slot;
		var date_select;
		var date_text;
		var date = new minjs.Date();
		
		function init(){		
		
			number_slot = minjs.Element.get("number-slot");
			number_select = minjs.Element.get("number-select").getDOMElement();
			number_select.selectedIndex = 0;
			number_checkbox = minjs.Element.get("number-checkbox").getDOMElement();
			number_text = minjs.Element.get("number-text").getDOMElement();
			
			date_slot = minjs.Element.get("date-slot");
			date_select = minjs.Element.get("date-select").getDOMElement();
			date_select.selectedIndex = 0;
			date_text = minjs.Element.get("date-text").getDOMElement();

			changeNumberFormat();
			changeDateFormat();
		}
		
		function changeNumberFormat(){
			var format = {
				fractionDigits: number_select.options[number_select.selectedIndex].text,
				thousandSeparator: number_checkbox.checked
			};
			number_slot.setInnerHTML(number.toString(format));
		}
		
		function changeNumberValue(){
			var value = number_text.value;
			number = new minjs.Number(value);
			changeNumberFormat();
		}
		
		function changeDateFormat(){
			var format = date_select.options[date_select.selectedIndex].text;
			date_slot.setInnerHTML(date.toString(format));
		}
		
		function changeDateValue(){
			var value = date_text.value;
			date = new minjs.Date(value);
			changeDateFormat();
		}
		
	</script>

</head>
<body onload="init();">
	<table border="1">
		
		<!-- NUMBER -->
		<tr><td>
			minjs.Number
		</td><td>
			<div id="number-slot"></div>
		</td><td>
			Fractional digits:
			<select id="number-select" onchange="changeNumberFormat();">
				<option>0</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
			</select>
			Use thousands separator:
			<input type="checkbox" id="number-checkbox" onclick="changeNumberFormat();"/>
		</td><td>
			<input type="text" id="number-text"/>
			<button onclick="changeNumberValue();">Change number value</button>
		</td></tr>

		<!-- DATE -->
		<tr><td>
			minjs.Date
		</td><td>
			<div id="date-slot"></div>
		</td><td>
			Change date format here:
			<select onchange="changeDateFormat();" id="date-select">
				<option>m/d/y</option>
				<option>mm/dd/yy</option>
				<option>dd.mm.yy</option>
				<option>dd.mm.yyyy</option>
				<option>dd/mm/yyyy</option>
			</select>
		</td><td>
			<input type="text" id="date-text"/>
			<button onclick="changeDateValue();">Change date value</button>			
		</td></tr>
		
	</table>
</body>
</html>
